<template>
	<div class="address-item" v-loading="loading">
		<el-dialog v-model="dialogVisible" title="编辑地址" width="600px" destroy-on-close>
			<el-row align="middle" :gutter="20" v-if="!isHideLabel">
				<el-col :span="24">
					<div class="sub-title">地址标签</div>
					<el-input show-word-limit v-model="item.label" placeholder="请输入地址标签" maxlength="20"></el-input>
				</el-col>
			</el-row>
			<el-row align="middle" :gutter="20">
				<el-col :span="12">
					<div class="sub-title">名字</div>
					<el-input show-word-limit v-model="item.firstName" placeholder="请输入名字" maxlength="200"></el-input>
				</el-col>
				<el-col :span="12">
					<div class="sub-title">姓氏</div>
					<el-input show-word-limit v-model="item.lastName" placeholder="请输入姓氏" maxlength="200"></el-input>
				</el-col>
			</el-row>
			<el-row align="middle" :gutter="20">
				<el-col :span="24">
					<div class="sub-title">地址</div>
					<el-input show-word-limit v-model="item.address" placeholder="请输入地址" maxlength="200"></el-input>
				</el-col>
			</el-row>
			<el-row align="middle" :gutter="20">
				<el-col :span="24">
					<div class="sub-title">城市</div>
					<el-input show-word-limit v-model="item.city" placeholder="请输入城市" maxlength="200"></el-input>
				</el-col>
			</el-row>
			<el-row align="middle" :gutter="20">
				<el-col :span="12">
					<div class="sub-title">国家</div>
					<el-select v-model="item.countryValue" placeholder="选择国家">
						<el-option
							v-for="cityItem in cityList"
							:key="cityItem.shorthand"
							:label="cityItem.countriesRegions"
							:value="cityItem.shorthand"
						></el-option>
					</el-select>
				</el-col>
				<el-col :span="12">
					<div class="sub-title">邮政编码</div>
					<el-input show-word-limit v-model="item.postCode" placeholder="请输入邮政编码" maxlength="200"></el-input>
				</el-col>
			</el-row>
			<el-row align="middle" :gutter="20">
				<el-col :span="24">
					<div class="sub-title">电话</div>
					<el-input show-word-limit v-model="item.phone" placeholder="请输入电话" maxlength="200"></el-input>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close" :loading="submitLoading">取消</el-button>
					<el-button type="primary" @click="submit" :loading="submitLoading">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- <div class="address-item-h1" v-if="defaultItem.isDefault">默认地址</div> -->
		<div class="address-item-text-box">
			<el-form :inline="true" class="demo-form-inline" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="名字" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.firstName" placeholder="请输入名字" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓氏" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.lastName" placeholder="请输入姓氏" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="地址" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.address" placeholder="请输入地址" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="城市" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.city" placeholder="请输入城市" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="国家" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.countryValue" placeholder="请输入国家" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮政编码" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.postCode" placeholder="请输邮政编码" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="电话" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.phone" placeholder="请输入电话" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="!isHideLabel">
						<el-form-item label="地址标签" style="width: 100%">
							<el-input show-word-limit disabled :value="defaultItem.label" placeholder="请输入地址标签" maxlength="200"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="address-item-add" v-if="!disabled">
			<el-button type="success" @click="dialogVisible = true">编辑地址</el-button>
		</div>
	</div>
</template>

<script setup>
import { getCommonCityList } from '/@/utils/commonRequest';
let submitLoading = ref(false);
let dialogVisible = ref(false);
const cityList = ref([]);
const emit = defineEmits(['submit']);
const props = defineProps({
	item: {
		type: Object,
		default: () => {
			return {
				id: '',
				isDefault: false,
				label: '',
				firstName: '',
				lastName: '',
				address: '',
				city: '',
				countryValue: '',
				countryLabel: '',
				postCode: '',
				phone: '',
			};
		},
	},
	defaultItem: {
		type: Object,
		default: () => {
			return {
				id: '',
				isDefault: false,
				label: '',
				firstName: '',
				lastName: '',
				address: '',
				city: '',
				countryValue: '',
				countryLabel: '',
				postCode: '',
				phone: '',
			};
		},
	},
	loading: {
		type: Boolean,
		default: false,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	isHideLabel: {
		type: Boolean,
		default: false,
	},
});

getCityList();

async function getCityList() {
	cityList.value = await getCommonCityList();
}

function close() {
	dialogVisible.value = false;
}

function submit() {
	emit('submit', props.item);
	close();
}
onMounted(() => {});
</script>
<style lang="scss">
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.sub-title {
	font-size: 16px;
}
.address-item {
	.address-item-h1 {
		font-size: 24px;
		padding-bottom: 10px;
	}
	.address-item-text-box {
		overflow: hidden;
		position: relative;
		.address-item-tip {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 16px;
			background: #ffffff;
		}
		.address-item-text {
			font-size: 16px;
			padding-bottom: 3px;
			word-wrap: break-word;
		}
	}
	.address-item-add {
		margin-top: 20px;
	}
}
</style>
